<!DOCTYPE html>
<html>
<head>
	<title>版本列表</title>
	<!--#include("../common/common-link.html"){}-->
	<style type="text/css">
		.table-panel .conditions .col .input-group{width:356px;}
		.table-panel .conditions .col .type-input-group{width:160px;}
		.table-panel .conditions .col .type-input-group .addon{background-color: #5cb85c;border-color: #4cae4c;color: #fff;}
		.table-panel .conditions .col .type-input-group .type-input-group-btn{width:90px;}
		.table-panel .conditions .col .type-input-group .type-input-group-btn .btn-success{border-left-color: #2cae4c}
		.table-panel .conditions .col .status{width:103px;}
		.table-panel .conditions .col .ok-btn{width:90px;}
		.table-panel .table-content .operation .btn{width:89px;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">条件筛选</h4>
			</div>
			<div class="conditions">
				<div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">外部版本</span>
                        <input type="text" class="form-control" :value="form.version" v-model="form.version">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">内部版本号</span>
                        <input type="text" class="form-control" :value="form.edition" v-model="form.edition">
                    </div>
                </div></br>
				<div class="col">
                    <div class="input-group type-input-group">
                        <span class="input-group-addon addon">系统</span>
                        <div class="input-group-btn type-input-group-btn">
                            <button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
                                <span class="type-txt">{{osTypeTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="javascript:void(0)" @click="osTypeSelect(-1)">全部</a></li>
                                <li><a href="javascript:void(0)" @click="osTypeSelect(1)">Android</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group type-input-group">
                        <span class="input-group-addon addon">终端</span>
                        <div class="input-group-btn type-input-group-btn">
                            <button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
                                <span class="type-txt">{{terminalTypeTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="javascript:void(0)" @click="terminalTypeSelect(-1)">全部</a></li>
                                <li><a href="javascript:void(0)" @click="terminalTypeSelect(1)">商户总店</a></li>
                                <li><a href="javascript:void(0)" @click="terminalTypeSelect(4)">商户分店</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group type-input-group">
                        <span class="input-group-addon addon">强制升级</span>
                        <div class="input-group-btn type-input-group-btn">
                            <button type="button" class="status btn btn-success dropdown-toggle" data-toggle="dropdown">
                                <span class="type-txt">{{forceUpgradeTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="javascript:void(0)" @click="forceUpgradeSelect(-1)">全部</a></li>
                                <li><a href="javascript:void(0)" @click="forceUpgradeSelect(0)">否</a></li>
                                <li><a href="javascript:void(0)" @click="forceUpgradeSelect(1)">是</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
					<input class="btn btn-primary ok-btn" type="button" value="查&emsp;询" @click="query">
					<input class="btn btn-primary ok-btn" type="button" value="重&emsp;置" @click="reset">
				</div>
			</div>
			<div class="header">
				<h4 class="title">版本列表</h4>
				<div class="btns-group">
					<input type="button" class="btn btn-primary" @click="operation(-1,0)" value="添加新版本"/>
				</div>
			</div>
			<div class="content">
				<table class="table-content">
					<tr>
						<th width="5%">序号</th>
						<th width="16%">外部版本</th>
						<th width="10%">内部版本</th>
                        <th width="10%">系统</th>
                        <th width="8%">终端</th>
                        <th width="8%">强制升级</th>
						<th width="15%">上线时间</th>
						<th width="28%">操作</th>
					</tr>
					<template v-if="list&&list.length>0">
						<tr v-for="(item,index) in list">
							<td>{{index+1}}</td>
							<td>{{item.version}}</td>
							<td>{{item.edition}}</td>
							<td>{{osTypeMap[item.osType]}}</td>
                            <td>{{terminalTypeMap[item.terminalType]}}</td>
                            <td>{{forceUpgradeMap[item.forceUpgrade]}}</td>
							<td>{{item.createTime}}</td>
							<td class="operation">
								<input class="btn btn-success btn-sm" type="button" value="修&emsp;改" @click="operation(item.id,1)">
								<input class="btn btn-primary btn-sm" type="button" value="查看详情" @click="operation(item.id,2)">
								<input class="btn btn-warning btn-sm" type="button" value="删除" @click="operation(item.id,3)">
							</td>
						</tr>
					</template>
					<template v-else>
						<tr>
							<td colspan="8">没有版本列表</td>
						</tr>
					</template>
				</table>
			</div>
			<div id="page"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var data = {};
	var vue = {};
	var form = {};
	vue.initialize = function() {
		form.osType = "";
		form.terminalType = "";
		form.version = "";
		form.edition = "";
		form.payType = "";
		data.osTypeTxt = "全部";
		data.terminalTypeTxt = "全部";
		data.forceUpgradeTxt = "全部";
		data.list = [];
		initOsType();
		initTerminalType();
		initForceUpgrade();
		new Vue({
			el : "#container-wrap",
			data : data,
			methods : vue
		});
		request();
		Vue.nextTick(function() {
			$("#container-wrap").show();
		});
	};
	function query() {
		resetQuery();
		request();
	};
	function reset() {
		util.reset(form);
		data.osTypeTxt = "全部";
		data.terminalTypeTxt = "全部";
		data.forceUpgradeTxt = "全部";
	};
	function resetQuery(){
		form.currentPageIndex=1;
	};
	function request() {
		var load_id = util.load();
		util.post({
			url:"/version/list",
			data:form,
			success : function(result) {
				$.extend(data, result);
				Vue.nextTick(function() {
					page();
				});
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function osTypeSelect(status) {
		if (status == '-1') {
			data.osTypeTxt = "全部";
			form.osType = "";
		} else if (status == '1') {
			data.osTypeTxt = "Android";
			form.osType = status;
		} 
	};
	function terminalTypeSelect(status) {
		if (status == '-1') {
			data.terminalTypeTxt = "全部";
			form.terminalType = "";
		} else if (status == '1') {
			data.terminalTypeTxt = "商户总店";
			form.terminalType = status;
		} else if (status == '4') {
			data.terminalTypeTxt = "商户分店";
			form.terminalType = status;
		}
	};
	function forceUpgradeSelect(status) {
		if (status == '-1') {
			data.forceUpgradeTxt = "全部";
			form.forceUpgrade = "";
		} else if (status == '0') {
			data.forceUpgradeTxt = "否";
			form.forceUpgrade = status;
		} else if (status == '1') {
			data.forceUpgradeTxt = "是";
			form.forceUpgrade = status;
		}
	};
	function initOsType(){
		var map={};
		map["1"]="Android";
		data.osTypeMap=map;
	};
	function initTerminalType(){
		var map={};
		map["1"]="商户总店";
		map["4"]="商户分店";
		data.terminalTypeMap=map;
	};
	function initForceUpgrade(){
		var map={};
		map["0"]="否";
		map["1"]="是";
		data.forceUpgradeMap=map;
	};
	function page() {
		util.laypage({
			elem : 'page',
			count : data.totalRecord,
			limit : form.pageSize,
			curr : form.currentPageIndex,
			jump : function(obj, first) {
				form.currentPageIndex = obj.curr;
				if (!first) {
					form.pageSize=obj.limit;
					request();
				}
			}
		});
	};
	function operation(id,type){
		var url="";
		if(type==0){
			url+="add";
		}else if(type==1){
			url+="modify?id="+id;
		}else if(type==2){
			url+="detail?id="+id;
		}else if(type==3){
			del(id);
		}
		if($.trim(url)!=''){
			window.location.href=url;
		}
	};
	function del(id){
		util.confirm("确认删除该版本？",function(){
			util.post({
				url:"/version/delete",
				data:{id:id},
				success : function(result) {
					request();
					util.alert("操作成功");
				},
				complete : function() {
					layer.closeAll();
				}
			});
		});
	};
	function initialize(){
		layui.use(['laypage'], function(){
			laypage = layui.laypage;
			vue.initialize();
		});
	}
</script>